<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.username" placeholder="用户名" style="width: 200px;" clearable class="filter-item" />
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      <el-button class="filter-item" @click="onReset">重置</el-button>
      <el-button class="filter-item" @click="onAdd">添加</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.state }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getPage } from '@/api/system-manger'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      queryParam: {
        username: ''
      },
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getPage().then(response => {
        this.list = response.data.records
        this.listLoading = false
      })
    },
    onSubmit() {
      getPage(this.queryParam).then(response => {
        this.list = response.data.records
        this.listLoading = false
      })
    },
    onReset() {
      this.form = {}
    }
  }
}
</script>
